﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>

    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">
        var default_hls_address = 'index.m3u8';
        var options = {
            width: 1000,
            height: 600,
            autoplay: true,
            controls: true,
            loop: true,
            preload: 'auto',
            sourceOrder: true,
            sources: [{
                src: default_hls_address,
                type: 'application/x-mpegURL'
            }, {
                src: '',
                type: 'video/webm'
            }],
            techOrder: ['html5'],
            flash: {
                swf: ''
            }
        }
        var video = videojs('my-video', options);
        video.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function (e) {

        });
        window.onbeforeunload = (e) => {
            video.dispose();
        }
    </script>

</body>
</html>